<template>
  <ElButton @click="(dialogData.model = true), (dialogData.type = 'add')">添加</ElButton>
  <ElButton @click="(batchData.model = true)">生成批量关键词</ElButton>
  <br />
  <el-row :gutter="20" class="typeMenu">
    <el-col :span="2" ><el-button @click="loadList()">全部</el-button></el-col>
    <el-col :span="2" v-for="(item ,index ) in typeData" :key="index"><el-button @click="loadList(item.id)">{{item.name}}</el-button></el-col>
  </el-row>
  <div class="box">
    <el-tag class="tags" type="primary" v-for="(item,index) in tableData " :key="index">{{ item.key }}-{{ item.describe }}</el-tag>
  </div>
  <el-dialog v-model="dialogData.model" :title="dialogData.type == 'add' ? '添加角色' : '编辑角色'" width="800">
    <wordManage @item="close" :id="dialogData.id" :type="dialogData.type" L></wordManage>
  </el-dialog>
  <el-dialog v-model="batchData.model" title="批量生成关键词" width="800">
    <wordBatchManage @item="close" :id="dialogData.id" :type="dialogData.type" L></wordBatchManage>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { WordList as getList,WordTypeList as getTypeList } from '../../api/api';
import { ElButton } from "element-plus";
import wordManage from "./wordManage.vue"
import wordBatchManage from "./wordBatchManage.vue"
const dialogData = ref({
  model: false,
  type: 'add',
  id: ''
})
const batchData = ref({
  model: false,
})
const typeData = ref([]);
const tableData = ref([])
onMounted(() => {
  loadList();
  typeList()
});
const loadList = (id) => {
  try {
    // 这里应该是发送登录请求的代码，例如使用axios或者其他HTTP客户端
    getList({id:id}).then((res) => {
      console.log('res', res)
      tableData.value = res.data

    })

  } catch (error) {
    // 处理登录失败的情况
    console.error('error', error);
    // 可以在这里提示用户登录失败的信息
  }
};
const close = () => {
  dialogData.value = { model: false }
  loadList();
}
const typeList = () => {
  try {
    // 这里应该是发送登录请求的代码，例如使用axios或者其他HTTP客户端
    getTypeList({}).then((res) => {
      console.log('res', res)
      typeData.value = res.data

    })

  } catch (error) {
    // 处理登录失败的情况
    console.error('error', error);
    // 可以在这里提示用户登录失败的信息
  }
};

</script>
<style scoped> 
.typeMenu{
  margin: 24px;
}
.box{
  margin: 24px;
}
.tags{
  margin: 12px;
  font-size: 16px;
}
</style>
